import React from 'react';
import {
  Box,
  Avatar,
  Menu,
  Image,
  Pressable,
  Text,
  Fab,
  Button,
} from 'native-base';
import {ScrollView, FlatList, RefreshControl} from 'react-native';
import LinearGradinet from 'react-native-linear-gradient';
import Menu_SVG from '../public/icons/menu';
import Like_SVG from '../public/icons/like';
import Comment_SVG from '../public/icons/comment';
import Send_SVG from '../public/icons/send';
import Add_SVG from '../public/icons/add';

const Community = props => {
  //data
  let rawpapers = [
    {
      id: 1,
      userName: '张三',
      userAvatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      usergroupName: '公园老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      title: '关于举办“乒乒乓乓”活动的通知',
      content:
        '关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知',
      date: '2022-11-11',
      star: false,
      media: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      starNum: 0,
      commentNum: 0,
      sendNum: 0,
    },
    {
      id: 1,
      userName: '张三',
      usergroupName: '公园老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      title: '关于举办“乒乒乓乓”活动的通知',
      content:
        '关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知',
      date: '2022-11-11',
      star: false,
      media: null,
      starNum: 0,
      commentNum: 0,
      sendNum: 0,
    },
    {
      id: 1,
      userName: '张三',
      usergroupName: '公园老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      title: '关于举办“乒乒乓乓”活动的通知',
      content:
        '关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知',
      date: '2022-11-11',
      star: false,
      media: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      starNum: 0,
      commentNum: 0,
      sendNum: 0,
    },
    {
      id: 1,
      userName: '张三',
      usergroupName: '公园老大爷委会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      title: '关于举办“乒乒乓乓”活动的通知',
      content:
        '关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知关于举办“乒乒乓乓”活动的通知',
      date: '2022-11-11',
      star: false,
      media: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      starNum: 0,
      commentNum: 0,
      sendNum: 0,
    },
  ];
  const [usergroup, setUsergroup] = React.useState([
    {
      id: 1,
      name: 'all',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: true,
    },

    {
      id: 2,
      name: '公园老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 3,
      name: '公园老大爷委会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 4,
      name: '园老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 5,
      name: '公园老爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 6,
      name: '公老大爷委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 7,
      name: '公园老大爷委员',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
    {
      id: 8,
      name: '公园老大委员会',
      avatar: 'https://reactnative.dev/img/pwa/manifest-icon-512.png',
      active: false,
    },
  ]);
  const [papers, setPapers] = React.useState(rawpapers);
  const [refreshing, setRefreshing] = React.useState(false);
  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    console.log(1)
    // fetch().then(() => setRefreshing(false))
  }, []);

  //method
  //render
  return (
    <Box flex={1} style={{backgroundColor: '#f3f3f3'}}>
      <Box style={{paddingBottom: 10, paddingTop: 10, backgroundColor: '#fff'}}>
        <FlatList
          horizontal
          renderItem={({item, index}) => {
            return (
              <Pressable
                onPress={() => {
                  let newUsergroup = usergroup.map((item, i) => {
                    if (index === i) {
                      item.active = true;
                    } else {
                      item.active = false;
                    }
                    return item;
                  });
                  setUsergroup(newUsergroup);
                  let newPapers = rawpapers.filter((m, i) => {
                    if (item.name === 'all') return true;
                    if (item.name == m.usergroupName) return true;
                    else return false;
                  });
                  setPapers(newPapers);
                }}
                style={{
                  backgroundColor: item.active ? '#ccc' : '#fff',
                  borderRadius: 10,
                  marginLeft: 10,
                }}>
                <Avatar
                  source={{
                    uri: item.avatar,
                  }}></Avatar>
              </Pressable>
            );
          }}
          data={usergroup}
          showsHorizontalScrollIndicator={false}></FlatList>
        <LinearGradinet
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
          start={{x: 0, y: 0}}
          end={{x: 1, y: 0}}
          style={{
            position: 'absolute',
            top: 0,
            right: 60,
            height: 60,
            width: 30,
          }}></LinearGradinet>
        <Box
          style={{
            backgroundColor: '#fff',
            position: 'absolute',
            top: 0,
            right: 0,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            width: 60,
            height: 60,
          }}>
          <Menu
            trigger={triggerProps => {
              return (
                <Pressable
                  accessibilityLabel="More options menu"
                  {...triggerProps}>
                  <Menu_SVG></Menu_SVG>
                </Pressable>
              );
            }}>
            <Menu.Item
              onPress={() => {
                props.route.params.navigateTo('ExistCommunity');
              }}>
              我的圈子
            </Menu.Item>
            <Menu.Item
              onPress={() => {
                props.route.params.navigateTo('AddCommunity');
              }}>
              加入新圈子
            </Menu.Item>
          </Menu>
        </Box>
      </Box>
      <ScrollView
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>
        {papers.map((item, index) => {
          return (
            <Box
              key={index}
              style={{
                marginLeft: 10,
                marginRight: 10,
                backgroundColor: '#fff',
                borderRadius: 10,
                padding: 10,
                marginTop: 10,
              }}>
              <Box
                style={{
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}>
                <Box style={{display: 'flex', flexDirection: 'row'}}>
                  <Avatar source={{uri: item.avatar}}></Avatar>
                  <Box style={{marginLeft: 10}}>
                    <Text fontSize={18}>{item.usergroupName}</Text>
                    <Text fontSize={10}>{item.userName}</Text>
                  </Box>
                </Box>
              </Box>
              <Pressable
                onPress={() => {
                  props.route.params.navigateTo('PaperDetail', {item});
                }}>
                <Text style={{marginBottom: 10, marginTop: 10}}>
                  {item.title}
                </Text>
              </Pressable>

              {item.media && (
                <Pressable
                  onPress={() => {
                    props.route.params.navigateTo('PaperDetail', {item});
                  }}>
                  <Image
                    style={{width: '100%', height: 200, marginBottom: 10}}
                    source={{uri: item.media}}
                    alt="content"
                    size="2xl"></Image>
                </Pressable>
              )}
              <Box style={{display: 'flex', flexDirection: 'row'}}>
                <Pressable
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    flexGrow: 1,
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    console.log('wait');
                  }}>
                  <Send_SVG liked={item.star}></Send_SVG>
                  <Text style={{marginLeft: 5}}>{item.sendNum}</Text>
                </Pressable>
                <Pressable
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    flexGrow: 1,
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    props.route.params.navigateTo('PaperDetail', {item});
                  }}>
                  <Comment_SVG liked={item.star}></Comment_SVG>
                  <Text style={{marginLeft: 5}}>{item.commentNum}</Text>
                </Pressable>
                <Pressable
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    flexGrow: 1,
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    const newPapers = papers.map((p, i) => {
                      if (i === index) {
                        let q = JSON.stringify(p);
                        q = JSON.parse(q);
                        q.star = !q.star;
                        q.star ? q.starNum++ : q.starNum--;
                        return q;
                      } else {
                        return p;
                      }
                    });
                    setPapers(newPapers);
                  }}>
                  <Like_SVG liked={item.star}></Like_SVG>
                  <Text style={{marginLeft: 5}}>{item.starNum}</Text>
                </Pressable>
              </Box>
            </Box>
          );
        })}
      </ScrollView>
      <Fab
        renderInPortal={false}
        shadow={2}
        size={'sm'}
        icon={<Add_SVG></Add_SVG>}
        colorScheme={'red'}
        onPress={() => {
          props.route.params.navigateTo('AddPaper');
        }}
      />
    </Box>
  );
};
export default Community;
